<template>
  <div class="chart-line-log-root" v-loading="rqLoading" element-loading-text="正在聚合日志信息, 请稍后...">
    <div style="width: 100%;height: 100%;" ref="ChartLineLogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from "vue";
import { logLineApi } from "@/api/log";
import { isNull } from "@/assets/utils/obj";
// echarts
import * as echartTheme from '@/assets/styles/xz/echartTheme';
import * as echarts from 'echarts/core';
import { TitleComponent, TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, TooltipComponent, LegendComponent, LabelLayout, GridComponent, LegendComponent, LineChart, CanvasRenderer, UniversalTransition]);

// -------------------- data
const ChartLineLogRef = ref<any>(null)
let chartLineLog: any;
let chartTitle: string;
let chartData: any;
const rqLoading = ref<boolean>(true);

const getLogLine = () => {
  rqLoading.value = true;
  logLineApi({ indexName: 'index_backend_log' }).then(resp => {
    if (isNull(resp.data)) {
      return;
    }
    chartTitle = resp.data.title
    chartData = resp.data;
    renderChart(
      setTimeout(() => {
        rqLoading.value = false;
      }, 300)
    );
  })
}

const renderChart = (callback?: any) => {
  chartLineLog.setOption(
    {
      title: { top: 5, right: 5, text: chartTitle, textStyle: echartTheme.title().textStyle },
      legend: echartTheme.legend(),
      grid: { top: 30, left: 40, right: 20, bottom: 35 },
      tooltip: echartTheme.tooltip(),
      xAxis: { type: 'category', scale: true, data: chartData.datetime.map((item: any) => item.substring(5).replaceAll(' ', '\n')) },
      yAxis: { type: 'value', splitLine: { lineStyle: { color: echartTheme.common().axisLineColor } } },
      series: [
        {
          name: 'DEBUG',
          type: 'line',
          sampling: 'lttb',
          smooth: true,
          showSymbol: false,
          data: chartData.debug,
          lineStyle: { color: echartTheme.clr().green, width: 2 },
          itemStyle: { color: echartTheme.clr().green, borderWidth: 10 }
        },
        {
          name: 'INFO',
          type: 'line',
          sampling: 'lttb',
          smooth: true,
          showSymbol: false,
          data: chartData.info,
          lineStyle: { color: echartTheme.clr().gray, width: 2 },
          itemStyle: { color: echartTheme.clr().gray }
        },
        {
          name: 'WARN',
          type: 'line',
          sampling: 'lttb',
          smooth: true,
          showSymbol: false,
          data: chartData.warn,
          lineStyle: { color: echartTheme.clr().yellow, width: 2 },
          itemStyle: { color: echartTheme.clr().yellow }
        },
        {
          name: 'ERROR',
          type: 'line',
          sampling: 'lttb',
          smooth: true,
          showSymbol: false,
          data: chartData.error,
          lineStyle: { color: echartTheme.clr().red, width: 2 },
          itemStyle: { color: echartTheme.clr().red, borderWidth: 10 }
        }
      ]
    }
  )
  if (callback !== undefined) {
    callback;
  }
}

const reload = () => {
  nextTick(() => {
    getLogLine();
  })
}

const windowResize = () => {
  chartLineLog.resize();
}

onMounted(() => {
  chartLineLog = echarts.init(ChartLineLogRef.value);
  windowResize();
})

defineExpose({
  reload, windowResize
})

</script>

<style scoped lang="scss">
.chart-line-log-root {
  @include box(100%, 100%);
}
</style>